import styled from "styled-components";
import { Avatar } from "@/ui/cpts/std/Avatar";
import type { XHSMention, XHSNote } from "@common/models";
import dayjs from "dayjs";
import { getNote } from "@/ui/utils/rpc/xhs";
import { useContext } from "react";
import { GlobalModel } from "@/ui/context";
import { getValueOrDie } from "@common/utils";
import { useMount, useSafeState } from "ahooks";
import { clsx } from "clsx";
import { Typography, Tag } from "antd";

const Wrapper = styled.div`
  font-size: 12px;
  padding: 10px;
  cursor: pointer;
  transition: 200ms;

  &:hover {
    background: whitesmoke;
  }

  .comment-card {
    &__title {
      display: flex;
      align-items: center;
    }

    &__source {
      font-weight: bolder;
      margin-right: 4px;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    &__note-title {
      color: grey;
      max-width: 200px;
    }

    &__author-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4px 0;
    }

    &__author {
      display: flex;
      align-items: center;
      font-weight: bolder;
    }

    &__create-time {
      color: grey;
    }

    &__content {
      margin-left: 29px;
    }
  }
`;

interface Props {
  mention: XHSMention;
  onClick?: () => void;
}

export function MentionCard(props: Props) {
  const { mention } = props;
  const globalModels = getValueOrDie(useContext(GlobalModel));
  const [note, setNote] = useSafeState<XHSNote>();

  useMount(async () => {
    const session = globalModels.sessions.find(
      (r) => r.apps.xhs.user?.user_id === mention.currentUserId,
    );
    const note = await getNote({
      targetId: session?.apps.xhs.targetId,
      noteId: mention.item_info.id,
      xsecToken: mention.item_info.xsec_token,
    });
    setNote(note);
  });
  return (
    <Wrapper
      className={clsx("comment-card", { unread: mention.isChecked === false })}
      onClick={props.onClick}
    >
      <div className={"comment-card__title"}>
        <div className={"comment-card__source"}>
          <Avatar src={mention.item_info.user_info.image} alt={"X"} />
          &nbsp;
          {mention.item_info.user_info.nickname}
        </div>
        <div className={"comment-card__note-title"}>
          {note?.title ? (
            <Typography.Text
              ellipsis={{ tooltip: note.title }}
              className={"comment-card__note-title"}
            >
              {note.title}
            </Typography.Text>
          ) : (
            "[加载中...]"
          )}
        </div>
      </div>
      <div className={"comment-card__author-info"}>
        <div className={"comment-card__author"}>
          <Avatar src={mention.user_info.image} alt={"X"} />
          <Typography.Text
            copyable={{
              text: `https://www.xiaohongshu.com/user/profile/${mention.user_info.userid}`,
              tooltips: ["复制用户主页链接", "复制成功"],
            }}
            style={{ marginLeft: 4 }}
          >
            {mention.user_info.nickname}
          </Typography.Text>
          {mention.user_info.indicator && (
            <Tag style={{ marginLeft: 4 }} color={"magenta"}>
              {mention.user_info.indicator.replace("你的", "")}
            </Tag>
          )}
        </div>
        <div className={"comment-card__create-time"}>
          {dayjs(mention.time * 1000).fromNow()}
        </div>
      </div>
      <div className={"comment-card__content"}>
        <Typography.Paragraph
          ellipsis={{
            rows: 2,
            expandable: "collapsible",
          }}
          onClick={(e) => e.stopPropagation()}
          style={{ color: mention.isChecked ? undefined : "red" }}
        >
          {mention.comment_info.content}
        </Typography.Paragraph>
      </div>
    </Wrapper>
  );
}
